Shopify 购买按钮：如何将任何网站变成在线商店
April 18th, 2025
您可以使用 Shopify 来 在线销售，即使您不希望创建一个完整的在线商店。
购买按钮 让你能够将任何网页变现，无论是博客、作品集还是社交媒体账号。
下面，了解如何将购买按钮嵌入到任何类型的网站中，以便让访客可以购买产品。
什么是购买按钮？
购买按钮允许您在任何类型的网站上创建并嵌入结账选项，以便客户可以在他们访问的页面上直接购买您的产品。
Shopify 生成了嵌入和展示您的商品所需的代码，使按钮简单易设、移动设备友好且安全。
您可以自定义购买按钮的颜色方案、产品详情和显示的产品图片，以匹配您的页面样式。
了解更多关于 Shopify 购买按钮的信息.
开始使用购买按钮：3个步骤
- 将“购买按钮”销售频道添加到您的 Shopify 商店
- 创建购买按钮
- 将购买按钮嵌入代码添加到您的网站HTML中
1. 将 Buy Button 销售渠道添加到您的 Shopify 商店
首先 登录 Shopify。如果在左侧菜单中看到 销售渠道 下列出“购买按钮”，则可以跳到第2步。
如果您的商店中已经列出“购买按钮”销售，则跳至步骤2。
在桌面
- 前往 Buy Button 销售渠道页面 在 Shopify 应用商店。
- 安装应用程序
- 将应用程序固定到您的管理导航（可选）
如果你没有固定购买按钮，你可以通过点击“销售频道”，然后在已安装的频道下点击“购买按钮”来再次找到它。
在移动设备上
- 打开 Shopify 应用 在您的移动设备上，并从底部菜单中选择“Store”。
- 在“销售渠道”旁边，选择“添加渠道”（iPhone）或“+”（Android）。
- 选择“购买按钮”，然后点击“添加购买按钮”。
2. 创建购买按钮
一旦您添加了购买按钮销售频道，您就可以创建您的购买按钮了。
在“购买按钮”选项卡上，点击“创建购买按钮”。
您可以为单个产品或整个产品系列创建购买按钮。在下一个屏幕上，您将被要求选择您偏好的选项。
选择一个选项，然后选择您希望为此创建购买按钮的产品。
一旦你选择了你的选项，你将被带到“购买按钮”编辑器，在那里你可以自定义“购买按钮”的外观。
如何自定义您的购买按钮
在“购买按钮”编辑器中，您将在左侧看到许多选项，用于自定义“购买按钮”的外观和感觉。在右侧，您将看到“购买按钮”的预览。
调整左侧的选项以符合您的喜好。您的预览将自动更新，因此您可以实时看到您的“购买按钮”的样子。您还可以通过点击编辑器顶部居中的桌面或移动图标，查看您的“购买按钮”在桌面和移动屏幕上的显示效果。
以下是您可以自定义的选项的详细信息：
- 产品变体：选择您希望通过“购买按钮”购买的产品变体。所有变体将默认选择。
- 布局：在“布局”下拉菜单中选择“基本”、“经典”和“全视图”之一。在右侧，您将在选择布局时看到每个布局的预览。
- 人们点击时的行动：在“添加产品到购物车”、“直接前往结账”或“打开产品详情”之间进行选择。“添加产品到购物车”选项将在屏幕右侧创建一个购物车小部件。“直接前往结账”选项将创建一个立即结账的按钮，该按钮将用户直接带到结账页面（注意，客户无法使用此选项向购物车添加多个商品）。 “打开产品详情”选项将创建一个“查看产品”按钮，该按钮会弹出一个包含产品信息和“添加到购物车”按钮的窗口。
- 按钮样式：在这里，您可以调整购买按钮的颜色、字体、大小和角形。
- 布局：布局菜单将允许您对按钮的布局进行更精细的调整。您可以自定义字体颜色、按钮文本和排版设置。
- 购物车：在这里，您可以调整购物车小部件的设置，包括复制和颜色。请注意，如果您使用“直接结账”布局，此选项将被灰色化，因为没有购物车小部件。
- 详细弹出窗口：如果您在“ people click ”下选择“ Open product details ”，您将能够在此部分自定义弹出窗口的文本、颜色和排版选项。
- 高级设置：在这里，您可以调整向用户展示结账页面的方式。您可以选择“打开弹出窗口”（这将创建一个在订单完成时自动关闭的弹出结账页面），或者“在相同标签页中重定向”（这将把用户重定向到您的 Shopify 结账页面，并在交易完成后将他们返回到您的页面）。
请记住，调整这些设置不会更改已经嵌入的购买按钮。
当您对设计满意时，请点击右上角的“下一步”按钮。
3. 将购买按钮嵌入代码添加到您的网站HTML中
当你点击“下一步”时，你的购买按钮嵌入代码将自动生成。如果你准备将它嵌入到网页上，请点击“复制代码”按钮。
您复制的代码可以粘贴到任何网页的HTML中。它将创建一个购买按钮和购物车，直接连接到您的Shopify管理后台，使您能够管理和处理来自任何网页的订单。
添加嵌入代码的过程会因您希望按钮的外观以及您使用的网站构建器和主题而异。
添加购买按钮脚本标签
一些网站构建器要求您分别在头部粘贴script标签，同时将其余代码粘贴在页面主体中，即您希望购买按钮出现的位置。
为了做到这一点，你需要将script元素从div元素中分离出来，在你的购买按钮嵌入代码中。
你会看到 div元素在代码的顶部。它看起来像这样：
脚本元素构成了嵌入代码的其余部分，以 script type="text/javascript" 开始，以 /script 结束。
复制并粘贴 script元素的全部内容到你的网站页面头部。
然后，打开您希望添加购买按钮的页面编辑器。将div元素粘贴到页面的任何位置，以便购买按钮出现在那里。
使用人工智能建立一个在线商店
用AI商店构建器在几分钟内创建网站。描述您的品牌或产品，以生成符合您想法的免费商店界面。
将电子商务添加到任何网站上，使用购买按钮
购买按钮让卖家在顾客所在的地方与他们见面。直接向顾客销售，而不将他们引导到其他页面，可以减少摩擦并有助于增加销售额。
对于博主、艺术家、作家、设计师、播客创作者、网红以及任何希望将作品变现的人而言，购买按钮是无需构建新网站即可使用Shopify的便捷方式。
阅读更多
- 亚马逊代销指南 - 如何在亚马逊上代销 (2024)
- 9个最适合您在线商店的代发货网站
- 如何在网上寻找产品进行销售
- 在 Shopify 上销售什么：12 个顶级商品推荐（2024）
- Shopify 是什么，它是如何运作的？
- 最赚钱的数字产品（以及如何推广它们）
- 什么是联盟营销以及如何开始
- 如何制定您的运输政策（附模板和示例）
- 19 个最佳 Shopify 服装店应用程序
- 14个通过Facebook广告推动更多假日销售的高级策略
购买按钮常见问题
如何在 Shopify 上添加购买按钮？
- 将“购买按钮”销售频道添加到您的 Shopify 商店。
- 点击创建购买按钮。
- 选择单个产品购买按钮或集合购买按钮。
- 选择您要出售的产品或系列。
- 自定义购买按钮的颜色、尺寸、文本和功能。
- 复制按钮嵌入代码。
- 将嵌入代码粘贴到您希望显示“购买按钮”的网页中。
Shopify 购买按钮有什么作用？
购买按钮让页面访问者无需直接访问您的商店即可购买产品。购买按钮可以添加到任何非Shopify网站或博客，并且HTML可定制。
Shopify 购物按钮是否安全？
购买按钮是一种安全且可靠的方式出售产品和服务，因为访客会被引导到您的完全保护、符合PCI标准的Shopify结账页面来处理他们的交易。Shopify的合规性涵盖了PCI标准的六个类别，并适用于使用我们平台的每个结账页面。
Shopify 购买按钮的费用是多少？
Shopify 购买按钮包含在所有 Shopify 套餐中，包括 入门套餐，每月 5 美元。
购买按钮有什么好处？
购买按钮允许您在任何网页或博客文章上使用Shopify的安全结账和电子商务管理工具进行销售，而无需设置Shopify商店。购买按钮创建了一个无摩擦的结账体验，可以在高流量页面上创造更多的销售。
“购买按钮”和“Shopify订单按钮”有什么区别？
两者执行类似的功能，但购买按钮可以嵌入到任何页面或博客文章中，甚至可以在像WordPress和Squarespace这样的第三方网站构建平台上使用。
文章原文：
常用跨境电商自建站平台：
1.【点击这里】立即免费试用 Shopify 14 天，创建自己的 Shopify 商务网站；
推荐阅读：